<template>
  <div class="dashboard-container">
    <div class="dashboard-top">
      <div class="dashboard-box">
        <div class="dashboard-img"><img :src="ruleForm.school_logo" alt="">
        </div>
        <div class="dashboard-text">
          <ul>
            <li>
              <p>机构名称：{{ ruleForm.school_name }}</p>
              <p></p>
              <p>账号：{{ ruleForm.school_userid }}</p>
              <!--              <p>密码：{{ ruleForm.school_pass }}</p>-->
            </li>
            <li>
              <p>联系方式：{{ ruleForm.school_mobile }}</p>
              <p></p>
              <p>品牌名称：{{ ruleForm.school_brandName }}</p>
            </li>
            <li>
              <p>网盘链接：{{ ruleForm.school_workLink }}</p>
              <p></p>
              <p>网盘提取码：{{ ruleForm.school_workCode }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="dashboard-box1" style="display: flex;margin-top: 30px;">
        <div class="dashboard-box1-left" style="width: 35%;">
          <div>
            <div style="display: flex; width: 100%;margin-bottom: 10px;"><span
              style="display: flex; width: 120px; align-items: center; justify-content: center;">TITLE：</span>
              <el-input disabled v-model="ruleForm.school_seoTitle" class="el-input" placeholder="请输入TITLE"></el-input>
            </div>
            <div style="display: flex; width: 100%;margin-bottom: 10px;"><span
              style="display: flex; width: 120px; align-items: center; justify-content: center;">Keywords：</span>
              <el-input disabled v-model="ruleForm.school_seoKeyword" class="el-input"
                        placeholder="请输入Keywords"></el-input>
            </div>
            <div style="display: flex; width: 100%;"><span
              style="display: flex; width: 120px; align-items: center; justify-content: center;">Description：</span>
              <el-input disabled v-model="ruleForm.content_seo_description" class="el-input"
                        placeholder="请输入Description"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 10px">
        <div style="display: flex;">
          <span style="display: flex; width: 109px; align-items: center; justify-content: center;">机构简介：</span>
          <!--<el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6}" placeholder="请输入机构简介"
                    v-model="ruleForm.content_introduction">
          </el-input>-->
          <quill-editor disabled="" v-model="ruleForm.content_introduction" ref="myQuillEditor" style="height: 400px;"
                        :options="editorOption">
          </quill-editor>
        </div>
      </div>
      <div style="display: flex;align-items: center;justify-content: center; margin-top: 100px;width: 90%;">
        <el-button type="primary" style="padding: 12px 50px;" @click="update">修&nbsp;&nbsp;改</el-button>
      </div>
    </div>
    <div class="dashboard-auto">
      <ul>
        <li @click="jumpToClass"><a href="javascript:void(0);">
          <el-link type="primary"><p>专业课程</p></el-link>
          <br>
          <el-link type="primary"> ({{ info.courseNum }})</el-link>
        </a></li>
        <li @click="jumpToSchool"><a href="javascript:void(0);">
          <el-link type="primary"><p>机构校区</p></el-link>
          <br>
          <el-link type="primary"> ({{ info.campusNum }})</el-link>
        </a></li>
        <li @click="jumpToTeacher"><a href="javascript:void(0);">
          <el-link type="primary"><p>师资人数</p></el-link>
          <br>
          <el-link type="primary"> ({{ info.teacherNum }})</el-link>
        </a></li>
        <li @click="jumpToPhoto"><a href="javascript:void(0);">
          <el-link type="primary"><p>机构照片</p></el-link>
          <br>
          <el-link type="primary"> ({{ info.albumNum }})</el-link>
        </a></li>
      </ul>
    </div>
    <div class="dashboard-bottom">
      <div>
        <template>
          <div style="margin-bottom: 20px;">更新日志</div>
          <el-table ref="menuTable"
                    style="width: 100%"
                    :data="list"
                    border>  <!-- v-loading="listLoading"-->
            <el-table-column label="操作的人员姓名" align="center">
              <template slot-scope="scope">{{ scope.row.admin_fullname }}</template>
            </el-table-column>
            <el-table-column label="操作的内容" align="center">
              <template slot-scope="scope">{{ scope.row.actionlog_content }}</template>
            </el-table-column>
            <el-table-column label="时间" align="center">
              <template slot-scope="scope">{{ scope.row.actionlog_createTime }}</template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div style="display: flex;align-items: center;justify-content: center; margin-top: 20px;">
        <el-button @click="completeUpdate" type="primary" style="padding: 12px 50px;"
                   v-if="group_title=='超级管理员'||group_title.indexOf('产品') != -1">完成更新
        </el-button>
        <el-button @click="needUpdate" type="primary" style="padding: 12px 50px;margin-left: 20%;"
                   v-if="group_title=='超级管理员'||group_title.indexOf('商务') != -1">需要更新
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Vuex, {mapGetters, mapMutations} from 'vuex'
import {schoolInfo, schoolEdit, schoolCount, schoolStatus, schoolLog} from "@/api/menu";
import {getInfo} from "@/api/user";
import {
  quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  data() {
    return {
      editorOption: {},
      group_title: '',
      list: [],
      ruleForm: {},
      info: {},
      input: '',
      textarea2: '',
      tableData: [{
        date: '2016-05-02',
        name: '需要更新',
        address: '许富强'
      }, {
        date: '2016-05-04',
        name: '完成更新',
        address: '王丹'
      }, {
        date: '2016-05-01',
        name: '完成更新',
        address: '小明'
      }]
    };
  },
  components: {
    quillEditor
  },
  mounted() {
    this.getInfo()
    this.getSchoolCount()
    this.getInformation()
  },
  computed: {
    ...mapGetters([
      'schoolId',
      'id'
    ]),
  },
  methods: {
    /**
     * 获取用户信息
     */
    getInformation() {
      getInfo().then(response => {
        console.log(response);
        this.group_title = response.data.group_title
      })
    },
    /**
     * 列表
     */
    getList() {
      schoolLog(this.ruleForm.id).then(response => {
        console.log(response);
        this.list = response.data;
      })
    },
    /**
     * 完成更新
     */
    completeUpdate() {
      schoolStatus({
        "actionlog_schoolId": this.ruleForm.id,
        "actionlog_adminId": this.id,
        "actionlog_content": "完成更新"
      }).then(response => {
        console.log(response);
        this.$message({
          message: response.msg,
          type: 'success'
        });
      });
    },
    /**
     * 完成更新
     */
    needUpdate() {
      schoolStatus({
        "actionlog_schoolId": this.ruleForm.id,
        "actionlog_adminId": this.id,
        "actionlog_content": "需要更新"
      }).then(response => {
        console.log(response);
        this.$message({
          message: response.msg,
          type: 'success'
        });
      });
    },
    /**
     * 获取当前机构已发布的课程/校区/师资/相册/活动等内容的总条数
     */
    getSchoolCount() {
      schoolCount(this.$route.query.rowId).then(response => {
        console.log(response);
        this.info = response.data
      }).catch(e => e);
    },
    jumpToClass() {
      this.$router.push({path: '/classList', query: {id: this.ruleForm.id}});
      this.$store.commit('user/SET_schoolId', this.ruleForm.id)
    },
    jumpToSchool() {
      this.$router.push({path: '/schoolList', query: {id: this.ruleForm.id}});
      this.$store.commit('user/SET_schoolId', this.ruleForm.id)
    },
    jumpToTeacher() {
      this.$router.push({path: '/teacherList', query: {id: this.ruleForm.id}});
      this.$store.commit('user/SET_schoolId', this.ruleForm.id)
    },
    jumpToPhoto() {
      this.$router.push({path: '/photoList', query: {id: this.ruleForm.id}});
      this.$store.commit('user/SET_schoolId', this.ruleForm.id)
    },
    /**
     * 详情
     */
    getInfo() {
      schoolInfo(this.$route.query.rowId).then(response => {
        console.log(response);
        this.ruleForm = response.data;
        schoolLog(this.ruleForm.id).then(response => {
          console.log(response);
          this.list = response.data;
        })
      });
    },
    /**
     * 修改
     */
    update() {
      this.$router.push({path: '/dashboardUpdate', query: {rowId: this.$route.query.rowId}});
    }
  },
}
</script>
<style scoped>
/* .el-table  >>> th, .el-table >>> tr{
  background-color: red;
} */
</style>

<style>

.dashboard-top {
  margin: 0 15px;
  padding: 30px;
  background-color: #fff;
}

.dashboard-bottom {
  margin: 0 15px;
  padding: 30px;
  border: 1px solid #797979;
  background-color: #fff;
}

.dashboard-auto {
  padding: 30px 15px;
  background-color: #f1f1f1;
}

.dashboard-auto > ul {
  padding: 0;
  margin: 0;
  display: flex;
}

.dashboard-auto > ul > li:nth-child(1) {
  margin-left: 0;
}

.dashboard-auto > ul > li {
  width: 100%;
  height: 100px;
  margin-left: 30px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #409EFF;
}

.dashboard-auto > ul > li > a {
  width: 100%;
  height: 100%;
  display: flex;
  color: #333333;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.dashboard-auto > ul > li > a > p {
  margin: 0;
  width: 100%;
  display: flex;
  line-height: 25px;
  font-weight: bold;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.dashboard-box {
  display: flex;
  align-items: center;
}

.dashboard-img {
  width: 200px;
  height: 80px;
  overflow: hidden;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #cccccc;
}

.dashboard-img > img {
  width: 100%;
}

.dashboard-text {
  width: 86%;
  margin: 20px 0 0 30px
}

.dashboard-text > ul {
  display: flex;
}

.dashboard-text > ul,
.dashboard-text p {
  padding: 0;
  margin: 0;
}

.dashboard-text > ul > li {
  list-style: none;
  width: 25%;
}

.dashboard-text > ul > li:nth-last-child(1) {
  width: 45%;
}

.dashboard-text > ul > li > p:nth-child(2) {
  height: 24px;
  margin: 10px 0;
  line-height: 24px;
}

.dashboard-text > ul > li:nth-child(2),
.dashboard-text > ul > li:nth-child(3),
.dashboard-text > ul > li:nth-child(4) {
  margin-left: 30px;
}

</style>
